<!-- 邀请成为帮卖 -->
<template>
  <view class="share_layout_box">
    <canvas class="myCanvas test" :style="'width:'+myCanvasWidth+'px;height:'+myCanvasHeight+'px'" canvas-id="helpSellPostersId"></canvas>
  </view>
</template>
<script>
// let canvasData = {
//   userAvatar: 'https://image.qqpyyds.com/user/avatar/1448144136114941954', // 用户头像
//   userNickname: '廖志林',  // 用户昵称
//   page: '/pages/index/index',
//   text1: '邀请你成为我的帮卖团长', // 文案1
//   text2: '哪吒的帮卖团长', // 文案2 推荐帮卖
//   fansMun: '1.2w', // 粉丝数
//   fansText: '粉丝数', // 粉丝数
//   followGroupMun: '3345', // 跟团人次
//   followGroupText: '跟团人次', // 跟团人次
//   btnText: '货源都给你，轻松赚佣金！', // 按钮文案
//   tipsText: '长按识别二维码 立即加入', // 提示文案
//   type: 1, 表示有3个数据显示
// }
// this.$refs.childHelpSellPosters.sharePosterFrends(canvasData)
// import { writeFile, removeSave } from '@/api/baseConvert'
import share from "@/api/share.js"
export default {
  data () {
    return {
      myCanvasWidth: 280,
      myCanvasHeight: 504,
      dpiMun: 3,
    }
  },
  created () {
    this.myCanvasWidth = this.myCanvasWidth*this.dpiMun
    this.myCanvasHeight = this.myCanvasHeight*this.dpiMun
  },
  methods: {
    async sharePosterFrends(data) {
      wx.showLoading({
        title: '生成中...',
        mask: true
      })
      let _this = this
      let _data = data
      let paramMap = {
        page: _data?.page ?? 'pages/index/index',
        ..._data.options,
        isHyaline: true,
        lineColor: {'r':253,'g':253,'b':253},
      }
      share.getSunCode(paramMap).then(async (res_) => {
        if (res_.code == 200) {
          // removeSave() // 先删除在添加
          let pam = {
              ..._data,
              QRCode: res_.data,
            }
            console.log(pam)
            await _this.createdCode(pam)
            let shareData = {}
            wx.canvasToTempFilePath({
              canvasId: 'helpSellPostersId',
              fileType: 'jpg',
              width: _this.myCanvasWidth,
              height: _this.myCanvasHeight,
              destWidth: _this.myCanvasWidth * 2,
              destHeight: _this.myCanvasHeight * 2,
              success: async (res) => {
                shareData = {
                  code: '200',
                  msg: '绘制成功！',
                  url: res.tempFilePath
                }
                console.log(shareData,'绘制成功')
                // _this.$store.commit('POSTER_SHARING_DATA', shareData)
                _this.$emit('posterShareSuccess', shareData)
                wx.hideLoading()
              },
              fail: function (res) {
                console.log('绘制失败')
                wx.hideLoading()
              }
            },_this)
          // writeFile(res_.data).then(async (img)=>{
          // }).catch(e=>{
          //   wx.hideLoading()
          //   console.log(e)
          // })
        }
      })
    },
    // 开始绘图
    createdCode (data) {
      let _this = this
      let fromData = data
      return new Promise(resolve => {
        exec()
        async function exec () {
          const ctx = wx.createCanvasContext('helpSellPostersId', _this) // 绘图上下文
          let halfW = _this.myCanvasWidth/2
          ctx.setFillStyle('#FFF6E1')
          ctx.fillRect(0, 0, _this.myCanvasWidth, _this.myCanvasHeight)
          ctx.save()
          await _this.drawImg('https://image.qqpyyds.com/mpAppImg/bgImg/redPacket_bg.png', ctx, 4*_this.dpiMun, 4*_this.dpiMun, 272*_this.dpiMun, 360*_this.dpiMun)
          ctx.setFontSize(16*_this.dpiMun)
          ctx.setFillStyle('#FEDFA6')
          ctx.fillText(fromData.text1, halfW-(ctx.measureText(fromData.text1).width/2), 58*_this.dpiMun, 272*_this.dpiMun)
          if (fromData.text2) {
            ctx.setFontSize(16*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.text2, halfW-(ctx.measureText(fromData.text2).width/2), 82*_this.dpiMun, 272*_this.dpiMun)
          }
          ctx.restore()
          ctx.save()
          ctx.beginPath()
          ctx.strokeStyle = '#fff'
          ctx.arc(140*_this.dpiMun,160*_this.dpiMun,28*_this.dpiMun,0,2*Math.PI)
          ctx.fill()
          ctx.clip()
          ctx.arc(250*_this.dpiMun, 50*_this.dpiMun, 27*_this.dpiMun, 0, 2 * Math.PI)
          ctx.setFillStyle('#F8A281')
          ctx.clip()
          await _this.drawImg(fromData.userAvatar, ctx, 114*_this.dpiMun, 132*_this.dpiMun, 54*_this.dpiMun, 54*_this.dpiMun)
          ctx.restore()
          let userNicknameStr = fromData.userNickname.length>20?fromData.userNickname.slice(0,19)+'...':fromData.userNickname
          let coordinateX = _this.myCanvasWidth/(fromData.type==1?6:4)
          ctx.setFontSize(14*_this.dpiMun)
          ctx.setFillStyle('#FEDFA6')
          ctx.fillText(userNicknameStr, (_this.myCanvasWidth-ctx.measureText(userNicknameStr).width)/2, 212*_this.dpiMun, _this.myCanvasWidth-(8*_this.dpiMun))
          ctx.setFontSize(16*_this.dpiMun)
          ctx.setFillStyle('#FEDFA6')
          ctx.fillText(fromData.fansMun, coordinateX-(ctx.measureText(fromData.fansMun).width/2), 244*_this.dpiMun, halfW)
          ctx.setFontSize(12*_this.dpiMun)
          ctx.setFillStyle('#FEDFA6')
          ctx.fillText(fromData.fansText, coordinateX-(ctx.measureText(fromData.fansText).width/2), 264*_this.dpiMun, halfW)
          if (fromData.type==1) {
            let halfWTwo = _this.myCanvasWidth/3 // 需要重新计算距离因为有3个
            ctx.setFontSize(16*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.highQualityMun, coordinateX-(ctx.measureText(fromData.highQualityMun).width/2)+halfWTwo, 244*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.highQualityText, coordinateX-(ctx.measureText(fromData.highQualityText).width/2)+halfWTwo, 264*_this.dpiMun, halfW)

            ctx.setFontSize(16*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.watchMun, coordinateX-(ctx.measureText(fromData.watchMun).width/2)+(halfWTwo*2), 244*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.watchText, coordinateX-(ctx.measureText(fromData.watchText).width/2)+(halfWTwo*2), 264*_this.dpiMun, halfW)
          } else {
            ctx.setFontSize(16*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.followGroupMun, coordinateX-(ctx.measureText(fromData.followGroupMun).width/2)+halfW, 244*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#FEDFA6')
            ctx.fillText(fromData.followGroupText, coordinateX-(ctx.measureText(fromData.followGroupText).width/2)+halfW, 264*_this.dpiMun, halfW)
          }

          ctx.setFontSize(12*_this.dpiMun)
          ctx.setFillStyle('#E44435')
          ctx.fillText(fromData.btnText, -1000, -1000, 200)

          let btnW = ctx.measureText(fromData.btnText).width+(24*_this.dpiMun)
          _this.handleBorderRect(ctx, (_this.myCanvasWidth-btnW)/2, 308*_this.dpiMun,btnW, 20*_this.dpiMun, 4*_this.dpiMun, '#FEDFA6')
          ctx.setFontSize(12*_this.dpiMun)
          ctx.setFillStyle('#E44435')
          ctx.fillText(fromData.btnText, (_this.myCanvasWidth-btnW)/2+14*_this.dpiMun, 323*_this.dpiMun, btnW)
          ctx.restore()
          await _this.drawImg(fromData.QRCode, ctx, 100*_this.dpiMun, 380*_this.dpiMun, 80*_this.dpiMun, 80*_this.dpiMun)
          ctx.restore()
          ctx.save()
          ctx.setFontSize(12*_this.dpiMun)
          ctx.setFillStyle('#969799')
          ctx.fillText(fromData.tipsText, (_this.myCanvasWidth-ctx.measureText(fromData.tipsText).width)/2, _this.myCanvasHeight-(16*_this.dpiMun), halfW)
          ctx.save()
          ctx.restore()
          ctx.draw(false, () => {
            resolve()
          })
        }
      })
    },
    // 画4个圆角
    handleBorderRect (ctx, x, y, w, h, r, color) {
      ctx.beginPath()
      // 左上角
      ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI)
      ctx.moveTo(x + r, y)
      ctx.lineTo(x + w - r, y)
      ctx.lineTo(x + w, y + r)
      // 右上角
      ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
      ctx.lineTo(x + w, y + h - r)
      ctx.lineTo(x + w - r, y + h)
      // 右下角
      ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
      ctx.lineTo(x + r, y + h)
      ctx.lineTo(x, y + h - r)
      // 左下角
      ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI)
      ctx.lineTo(x, y + r)
      ctx.lineTo(x + r, y)
      ctx.fillStyle = color
      ctx.fill()
      ctx.closePath()
    },
    // 文字自动换行
    wordsWrap (ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
      let lineWidth = 0
      let lastSubStrIndex = 0
      for (let i = 0; i < name.length; i++) {
        lineWidth += ctx.measureText(name[i]).width
        if (lineWidth > maxWidth) {
          ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY)
          srartY += wordsHight
          lineWidth = 0
          lastSubStrIndex = i
        }
        if (i === name.length - 1) {
          ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY)
        }
      }
    },
    // 绘制远程网络图片
    async drawImg (url, ctx, startX, startY, width, height) {
      let _this = this
      return new Promise(resolve => {
        exec()
        async function exec () {
          wx.getImageInfo({
            src: url,
            success: function (res) {
              const filePath = res.path
              ctx.drawImage(filePath, startX, startY, width, height)
              resolve()
            },
            fail: function (err) {
              console.log(err)
            },
            complete: function (err) {
              console.log(err)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.share_layout_box {
  position: fixed;
  left: -1000px;
  top: -1000px;
  // z-index: 999;
}
</style>